import React from "react";
import $ from "jQuery";
import * as echarts from "echarts";
import axios from "axios";

export default class Atlas extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            datas: [
                //     {
                //     id: '0',
                //     name: '古诗词知识图谱',
                //     symbolSize: 70,
                //     category: 0,
                // }
            ],
            links: []
        })

    }

    componentDidMount() {
        this.getData();

        // this.draw();
    }

    getData = () => {
        axios.get("http://localhost:8088/question/getData").then(
            (res) => {
                console.log(res.data);
                const datas = this.state.datas;
                const links = [];
                for (var i = 0; i < res.data.poetryList.length; i++) {
                    let data = res.data.poetryList[i];
                    datas.push({
                        id: "poetry" + data.poetryId,
                        name: data.poetryTitle,
                        des: data.poetryDetail,
                        symbolSize: 10,
                        category: 2,
                        itemStyle: {
                            normal: {
                                color: '#b2a59f'
                            }
                        }
                    })
                }
                for (var i = 0; i < res.data.poetList.length; i++) {
                    let data = res.data.poetList[i];
                    datas.push({
                        id: "poet" + data.poetId,
                        name: data.poetName,
                        symbolSize: 30,
                        category: 1,
                        itemStyle: {
                            normal: {
                                color: '#1e646e'
                            }
                        }
                    })
                }
                for (var i = 0; i < res.data.dynastyList.length; i++) {
                    let data = res.data.dynastyList[i];
                    datas.push({
                        id: "dynasty" + data.dynastyId,
                        name: data.dynastyName,
                        symbolSize: 50,
                        category: 0,
                        itemStyle: {
                            normal: {
                                color: '#023459'
                            }
                        }
                    })
                    // links.push({
                    //     source: '0',
                    //     target: 'dynasty' + data.dynastyId,
                    //     name: ''
                    // })
                }


                for (var i = 0; i < res.data.poet_dynastyList.length; i++) {
                    let link = res.data.poet_dynastyList[i];
                    links.push({
                        source: 'dynasty' + link.dynastyId,
                        target: 'poet' + link.poetId,
                        name: ''
                    })
                }
                // for (var i = 0; i < res.data.poetry_dynastyList.length; i++) {
                //     let link = res.data.poetry_dynastyList[i];
                //     links.push({
                //         source: 'dynasty' + link.dynastyId,
                //         target: 'poetry' + link.poetryId,
                //         name: ''
                //     })
                // }
                for (var i = 0; i < res.data.poetry_poetList.length; i++) {
                    let link = res.data.poetry_poetList[i];
                    links.push({
                        source: 'poet' + link.poetId,
                        target: 'poetry' + link.poetryId,
                        name: ''
                    })
                }
                this.setState({
                    datas: datas,
                    links: links
                })
                // console.log(datas);
                this.draw();
            }
        )
    }
    draw = () => {


        var myChart = echarts.init(document.getElementById('main'));
        var categories = [];
        categories[0] = ({
            name: '朝代',
            itemStyle: {
                normal: {
                    color: '#023459',
                },
            },

        })
        categories[1] = ({
            name: '诗人',
            itemStyle: {
                normal: {
                    color: '#1e646e'
                }
            }
        })
        categories[2] = ({
            name: '诗词',
            itemStyle: {
                normal: {
                    color: '#b2a59f'
                }
            }
        })
        const option = {
            // 图的标题
            title: {
                text: '知识图谱',
                textStyle: {
                    color: '#fff'
                }
            },
            // 提示框的配置
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                },
                alwaysShowContent: false

            },
            // 工具箱
            toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    // 还原
                    restore: {
                        show: true
                    },
                    // 保存为图片
                    saveAsImage: {
                        show: true
                    }
                }
            },
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a.name;
                })
            }],
            series: [{
                // type: 'graph', // 类型:关系图
                // layout: 'force', //图的布局，类型为力导图
                // // legendHoverLink: true,
                // // symbolSize: 40, // 调整节点的大小
                // roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                // // edgeSymbol: ['circle', 'arrow'],
                // // edgeSymbolSize: [2, 10],
                // edgeLabel: {
                //     normal: {
                //         textStyle: {
                //             fontSize: 20
                //         },
                //         show: true,
                //         formatter: function (x) {
                //             return x.data.name;
                //         }
                //     }
                // },
                // force: {
                //     repulsion: 10000,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                //     gravity: 0.8,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                //     edgeLength: 80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                //     layoutAnimation : false
                // },
                // focusNodeAdjacency : true,
                // draggable: true,
                // lineStyle: {
                //     normal: {
                //         width: 1,
                //         color: 'rgba(0,0,0,0.4)',
                //         opacity: 0.5,
                //         curveness : 0.3,
                //     }
                // },
                // label: {
                //     normal: {
                //         show: true,
                //         textStyle: {},
                //         // position: "bottom",
                //     }
                // },

                type: 'graph',
                layout: 'force',
                symbolSize: 65,
                roam: true,

                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20,
                            color:'#fff'
                        },
                        show: false,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    },

                },
                force: {
                    repulsion: 1550,
                    gravity: 0.95,
                    edgeLength: [10, 50]
                },
                draggable: true,
                focusNodeAdjacency: true,
                itemStyle: {
                    normal: {
                        // color: '#4b565b',
                        borderColor: 'rgba(255,225,255,0.5)',
                        borderWidth: 2,
                        opacity: 0.99
                    }
                },
                textStyle: {
                    normal: {
                        color: '#fff'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2
                    }
                },

                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        }
                    }
                },

                data: this.state.datas,
                links: this.state.links,
                // 数据
                // data: [{
                //     name: 'node01',
                //     des: 'nodedes01',
                //     symbolSize: 70,
                //     category: 0,
                // }, {
                //     name: 'node02',
                //     id:'2',
                //     des: 'nodedes02',
                //     symbolSize: 50,
                //     category: 1,
                // }, {
                //     name: 'node02',
                //     id:'3',
                //     des: 'nodedes3',
                //     symbolSize: 50,
                //     category: 1,
                // }, {
                //     name: 'node04',
                //     des: 'nodedes04',
                //     symbolSize: 50,
                //     category: 1,
                // }, {
                //     name: 'node05',
                //     des: 'nodedes05',
                //     symbolSize: 50,
                //     category: 1,
                // }],
                // links: [{
                //     source: 'node01',
                //     target: '2',
                //     name: 'link01',
                //     des: 'link01des'
                // }, {
                //     source: 'node01',
                //     target: '3',
                //     name: 'link02',
                //     des: 'link02des'
                // }, {
                //     source: 'node01',
                //     target: 'node04',
                //     name: 'link03',
                //     des: 'link03des'
                // }, {
                //     source: 'node01',
                //     target: 'node05',
                //     name: 'link04',
                //     des: 'link05des'
                // }],
                categories: categories,
            }]
        };
        myChart.setOption(option);
    }

    render() {


        return (
            <div>
                <div id="main" style={{width: '100%', height: '100%', position: 'absolute'}}>
                    图谱载入中……
                </div>
            </div>
        )

    }

}